<template>
	<view class="registerPage">
		<!-- 头部 -->
		<view class="nav-box">
			<view class="nav-img-box">
				<image class="nav-img" src="http://localhost:3000/static/返回.png" mode="" @click="goBackLogin"></image>
			</view>
			<view class="nav-text">
				注册
			</view>
		</view>
		<!-- 注册输入框 -->
		<view class="register-box">
			<view class="register-input">
				<view class="register-pad">
					<input class="register-input-text" type="text" id="uname" placeholder="请输入用户名" value="newUname" v-model="newUname">
				</view>
			</view>
			<view class="register-input">
				<view class="register-pad">
					<input class="register-input-text" type="password" id="pwd" placeholder="请输入密码" value="newPwd" v-model="newPwd">
				</view>
			</view>
			<view class="register-input">
				<view class="register-pad">
					<input class="register-input-text" type="password" id="pwd" placeholder="请确认密码" value="surePwd" v-model="surePwd">
				</view>
			</view>
		</view>
		<!-- 注册键 -->
		<view class="registerKey">
			<view class="registerKey-pad">
				<view class="registerKey-bgc" @click="newAccount">
					<text>注册</text>
				</view>
				<view class="noregister">
					<label class="radio">
						<checkbox :checked="status" v-model="status" @click="status=!status"><text>阅读并同意《安居家具注册协议》</text></checkbox>
					</label>
				</view>
			</view>
		</view>
		<!-- 已有账号 -->
		<view class="haveLogin" @click="goBackLogin">
			已有账号，去登录》
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newUname:'',
				newPwd:'',
				surePwd:'',
				status:false
			}
		},
		methods: {
			goBackLogin(){
				uni.navigateTo({
					url:"/subpkg/login/login"
				})
			},
			newAccount(){
				if(this.newUname==""){
					uni.showToast({
						title:"用户名不能为空",
						icon:"none"
					})
				}else
				if(this.newPwd == ""){
					uni.showToast({
						title:"设置密码不能为空",
						icon:"none"
					})
				}else
				if(this.newPwd !== this.surePwd){
					uni.showToast({
						title:"输入两次密码不相同",
						icon:"none"
					})
				}else 
				if(this.status!==true){
					uni.showToast({
						title:"请勾选家具注册协议",
						icon:"none"
					})
				}else
				if(this.newUname&&this.newPwd&&this.surePwd !== ""){
					this.joinName()
				}
			},
			async joinName(){
				let url=`/reg/${this.newUname}&${this.newPwd}`
				const { data:res }=await uni.$http.get(url)
				// console.log(res)
				if(res.code==200){
					uni.showToast({
						title:`${res.msg}`
					})
					uni.navigateTo({
						url:"/subpkg/login/login"
					})
				}else if(res.code==401){
					uni.showToast({
						title:`${res.msg}`,
						icon:"error"
					})
					uni.navigateTo({
						url:"/subpkg/login/login"
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	.registerPage {
		padding-top: 40rpx;
		.nav-box {
			padding: 40rpx 0 26rpx 22rpx;
			display: flex;
			border-bottom: 1rpx solid #dedbdd;
			.nav-img-box {
				margin-right: 304rpx;
				.nav-img {
					width: 15rpx;
					height: 28rpx;
				}
			}
		}
		.register-box {
			margin-top: 100rpx;
			.register-input {
				padding: 0 26rpx;
				margin-bottom: 60rpx;
				.register-pad {
					padding: 28rpx 0 28rpx 50rpx;
					display: flex;
					background-color: #F2F2F2;
					border-radius: 50rpx;
					.register-text {
						margin-right: 38rpx;
					}
					.register-input-text {
						font-size: 30rpx;
					}
				}
			}
		}
		.registerKey {
			margin-top: 140rpx;
			.registerKey-pad {
				padding: 0 24rpx;
				.registerKey-bgc {
					background-color: #232e3d;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					border-radius: 100rpx;
					color: #fff;
				}
			}
			.noregister {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				color: #8892A0;
				font-size: 30rpx;
			}
		}
		.haveLogin {
			position: fixed;
			bottom: 36rpx;
			left: 50%;
			translate: -50% 0;
			font-size: 24rpx;
			color: #4f4f4f;
		}
	}
</style>
